iT邦幫忙

2021 iThome 鐵人賽

DAY 8
1
Modern Web

ZK 30天速成系列 第 8

英雄列表範例:顯示列表

  • 分享至 

  • xImage
  •  

關聯到一個控制器

在伺服器的控制器(ZK composer)載入資料後,要讓它跟 zul 上寫的元件關聯,才能實際控制 zul上的元件,於是我在最上層的元件 <div>上的 apply 寫上完整 class 名稱:

<div width="20%" apply="quickstart.hero.HeroController" style="margin: 0 auto">
    <h:h3>復仇者英雄列表</h:h3>
    <listbox id="heroBox" rows="5" emptyMessage="無資料">
		...
		</listbox>

當我想控制 <div> 跟其下子元件時,我就必須將控制器關聯到該元件。

控制器的生命週期是由 ZK 決定,因此你無需寫程式去產生該物件。當一個瀏覽器訪問這個 zul 時,ZK 就會新建一個控制器物件,並呼叫對應的生命週期方法,如 doAfterCompose(),也會剖析 zul 檔將對應的元件生成,並綁定到我所指定的控制器上去。

資料模型驅動繪製 (Model-driven Rendering)

要用 Listbox 顯示資料前先了解 ZK 針對資料元件(例如Listbox, Grid, Tree)及一些支援 model 屬性的元件(如 Tabbox, Selectbox, Searchbox等)的設計架構都是採用「資料模型驅動繪製」。元件(Listbox)、zul、資料模型(ListModel),3者之間形成 MVC pattern。

Listbox 為例,開發者把資料模型 (ListModelList) 塞給元件 (Listbox),元件根據模板或繪製器 (<template>, ListItemRender) 生成其對應的子元件 (Listitem)。開發者需透過操控資料模型(ListModel)的內容來控制子元件而不是直接生成/消滅子元件。

https://ithelp.ithome.com.tw/upload/images/20210923/20050621g7i2XWzwFs.png

  • UI 元件 (Controller)
    • 從資料模型取得資料
    • 在資料模型上註冊一個資料變動傾聽器,當資料變動時,處理相關的變化
    • 處理從瀏覽器端來的事件,如使用者選擇某個項目
  • 資料模型 (Model)
    • 儲存應用程式資料物件 (the data could be Car, Person)
    • 當物件數量變動時通知元件,例如 add(), remove(), clear() 被呼叫時
    • ZK 提供數個內建的資料模型實作,請善加利用,請參考 ListModelTreeModelGroupsModel
  • 繪製器 (View)
    • 根據範本繪製對應子元件。若啟動 Render-on-Demand,則會根據瀏覽器捲動位置繪製必要的子元件,移除不需要的元件,節省記憶體,增進效能。
    • 如果沒指定範本,則會用內建繪製器繪製

定義繪製範本

setModel() 只是將資料塞給 Listbox,預設 Listbox 會呼叫 toString() 把每個 Hero 繪製出來,但這通常不是我們想要的。因此我要定義一個範本來決定怎麼繪製每一個 Hero 物件,語法如下:

<listbox id="heroBox" rows="5" emptyMessage="無資料" >
    <listhead>
        <listheader width="50px"/>
        <listheader />
    </listhead>
    <template name="model">
        <listitem>
            <listcell label="${forEachStatus.index}"/>
            <listcell label="${each.name}"/>
        </listitem>
    </template>
</listbox>
  • <listheader> 控制欄位寬度
  • <template> 用來定義範本,name 的值必須是 model,代表是給 model 用的範本。
  • ${each} 是 ZK 預設定義的隱含變數,代表 model 中的每個物件,在我們的例子中是 Hero,用 dot notation 來存取 Java bean 物件上的屬性如 ${each.name}
  • ${forEachStatus.index} 也是隱含變數,用來存取model索引值,從0 開始

上一篇
英雄列表範例:載入資料
下一篇
英雄列表範例:新增英雄
系列文
ZK 30天速成30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言